<template>
    <div class="orthographicimageoverview">
        <pagetitle type="2"></pagetitle>
        <div class="pageBox">
            <div class="pageleft" style="width: calc(100% - 380px)">
                <el-card>
                    <div class="top">
                        <div class="toptext">可用余额</div>
                        <div class="toptextBox">
                            <div class="toptextitem">
                                ￥<span>2616.00</span>
                                <p>
                                    <el-button type="primary">充值</el-button>
                                    <el-button>提现</el-button>
                                </p>
                            </div>
                        </div>
                        <div class="functip">
                            <div class="functipl">
                                <div>
                                    可用余额预警<el-icon class="icons"><QuestionFilled /></el-icon><span>未开启</span>
                                </div>
                                <div>
                                    账单数据存储<el-icon class="icons"><QuestionFilled /></el-icon><span>未开启</span>
                                </div>
                            </div>
                            <el-button type="primary" link>设置</el-button>
                        </div>
                    </div>
                </el-card>
                <div class="pageItem">
                    <div class="pageItembox">
                        <el-card class="pageItemboxcard">
                            <div class="titles">本月消费</div>
                            <div class="tipmoney">应付金额（2024/03/01-2024-03/18）</div>
                            <div class="money">￥2616.00</div>
                            <div class="tips">按需的产品结算存在一定延迟。<el-button type="primary" link>按需产品周期结算说明</el-button></div>
                        </el-card>
                        <el-card class="pageItemboxcard">
                            <div class="titles">近7天扣费资源<el-button type="primary" link>查看其他时间</el-button></div>
                            <div style="text-align: center; color: #999999; font-size: 12px; padding-top: 20px">暂无数据</div>
                        </el-card>
                    </div>
                </div>
                <div class="pageItem">
                    <div class="pageItembox">
                        <el-card class="pageItemboxcard" style="width: 100%">
                            <div class="titles">消费走势<el-button type="primary" link>查看费用账单</el-button></div>
                            <div class="trend">
                                <div class="trenditem">
                                    消费跨度
                                    <el-select v-model="value" placeholder="请选择" style="width: 110px" size="small">
                                        <el-option label="近6个月" value="6" />
                                    </el-select>
                                </div>
                                <div class="trenditem">
                                    实付金额
                                    <el-select v-model="value" placeholder="请选择" style="width: 110px" size="small">
                                        <el-option label="储值卡" value="6" />
                                    </el-select>
                                </div>
                            </div>
                            <div class="trendtip">更多时间跨度，如近7天、近30天消费，请在消费跨度下拉选择查看</div>
                            <img src="@/assets/image/7.png" style="width: 100%" alt="" srcset="" />
                        </el-card>
                    </div>
                </div>
            </div>
            <div class="pageright">
                <el-card>
                    <div class="rightItem">
                        <div class="titles">待我处理</div>
                        <div class="titlesTip">待支付订单</div>
                        <div class="cldata">
                            <div class="cldatal"><span>0</span>个</div>
                            <div class="cldatar">
                                <el-button type="primary" link>立即支付</el-button>
                                <span>|</span>
                                <el-button type="primary" link>全部订单</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="rightItem rightItemt">
                        <div class="titles">续费资源<el-button type="primary" link>立即续费</el-button></div>
                        <div class="recommend">
                            <div class="recommendBox">
                                <div class="recommendItem" style="width: 33.33%">
                                    <div class="name">7日内到期资源</div>
                                    <div>0</div>
                                </div>
                                <div class="recommendItem" style="width: 33.33%; margin: 0 10px">
                                    <div class="name">15日内到期资源</div>
                                    <div>0</div>
                                </div>
                                <div class="recommendItem" style="width: 33.33%">
                                    <div class="name">30日内到期资源</div>
                                    <div>0</div>
                                </div>
                            </div>
                            <div class="recommendBox">
                                <div class="recommendItem" style="width: 50%; margin-right: 10px">
                                    <div class="name">已过期（即将冻结）</div>
                                    <div>0</div>
                                </div>
                                <div class="recommendItem" style="width: 50%">
                                    <div class="name">已冻结（即将释放）</div>
                                    <div>0</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card style="margin-top: 20px">
                    <div class="rightItem">
                        <div class="titles">卡券/发票</div>
                        <div class="kfitem">
                            <div class="kfiteml">
                                <div class="name">代金券</div>
                                <div class="nametip">0 <span>张（￥0.00）</span></div>
                                <el-button type="primary" link>立即使用</el-button>
                            </div>
                            <div class="kfiteml">
                                <div class="name">
                                    可开票金额<el-icon class="icons"><QuestionFilled /></el-icon>
                                </div>
                                <div class="nametip">￥0.00</div>
                                <el-button type="primary" link>去开发票</el-button>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
        <!-- <el-card class="pageItem"> </el-card> -->
    </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref } from "vue";
const main: any = ref(null);
// const myChart = echarts.init(document.getElementById("main"));
// console.log(echarts, main, 11);
setTimeout(() => {
    // const myChart = echarts.init(document.getElementById("main"));
    // console.log(document.getElementById("main"));
    // myChart.setOption({
    //     title: {
    //         text: "空间总量：1352M",
    //         // subtext: "Fake Data",
    //         // left: "center",
    //     },
    //     tooltip: {
    //         trigger: "item",
    //     },
    //     legend: {
    //         orient: "vertical",
    //         left: "left",
    //     },
    //     series: [
    //         {
    //             name: "Access From",
    //             type: "pie",
    //             radius: "50%",
    //             data: [
    //                 { value: 1048, name: "Search Engine" },
    //                 { value: 735, name: "Direct" },
    //                 { value: 580, name: "Email" },
    //                 { value: 484, name: "Union Ads" },
    //                 { value: 300, name: "Video Ads" },
    //             ],
    //             emphasis: {
    //                 itemStyle: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: "rgba(0, 0, 0, 0.5)",
    //                 },
    //             },
    //         },
    //     ],
    // });
}, 1000);

// const option: ECOption = {
//     // ...
// };
// const myChart = echarts.init(main);
// 绘制图表
</script>
<style lang="scss" scoped>
.orthographicimageoverview {
    .top {
        .toptext {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
            margin-bottom: 30px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img {
                margin-left: 10px;
            }
        }
        .toptextBox {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .toptextitem {
                font-size: 20px;
                // text-align: center;
                P {
                    margin-top: 40px;
                }
                // button {
                //     font-size: 16px;
                // }
            }
        }
        .setupbarItem {
            margin-bottom: 16px;
            .itemtop {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
                .itemtopleft {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    div {
                        font-size: 14px;
                        font-weight: 400;
                        color: #333333;
                        width: 110px;
                    }
                    span {
                        font-size: 12px;
                        font-weight: 400;
                        color: #999999;
                    }
                }
            }
        }
        .functip {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #cccccc;
            padding-top: 20px;
            margin-top: 20px;
            .functipl {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                div {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-right: 180px;
                    color: #666666;
                    .icons {
                        margin: 0 10px;
                        color: #000000;
                    }
                    span {
                        color: #000000;
                    }
                }
            }
        }
    }
    .pageItem {
        margin-top: 20px;
        .pageItembox {
            display: flex;
            justify-content: space-between;
            .pageItemboxcard {
                width: calc(50% - 10px);
                .titles {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #333333;
                    font-size: 14px;
                    margin-bottom: 20px;
                }
                .tipmoney {
                    color: #666666;
                    font-size: 12px;
                    margin-bottom: 10px;
                }
                .money {
                    font-weight: bold;
                    font-size: 20px;
                    margin-bottom: 20px;
                    color: #000000;
                }
                .tips {
                    font-size: 12px;
                    color: #666666;
                }
                .trend {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .trenditem {
                        margin-right: 20px;
                        color: #666666;
                        font-size: 12px;
                        .el-select {
                            margin-left: 5px;
                        }
                    }
                }
                .trendtip {
                    color: #999999;
                    font-size: 12px;
                    margin: 20px 0;
                }
            }
        }
    }
    .pageBox {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .pageright {
        width: 380px;
        margin-left: 20px;
        .rightItemt {
            margin-top: 20px;
            border-top: 1px solid #cccccc;
            padding-top: 20px;
        }
        .rightItem {
            .titles {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                font-weight: 500;
                color: #333333;
                margin-bottom: 20px;
            }
            .titlesTip {
                font-size: 12px;
                color: #999999;
                margin-top: 20px;
                margin-bottom: 10px;
            }
            .cldata {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .cldatal {
                    font-weight: normal;
                    font-size: 12px;
                    color: #333333;
                    span {
                        font-weight: bold;
                        font-size: 20px;
                        color: #333333;
                        margin-right: 5px;
                    }
                }
                .cldatar {
                    span {
                        color: #cccccc;
                        margin: 0 15px;
                    }
                }
            }
            .announcementItem {
                margin-bottom: 20px;
                font-size: 14px;
                font-weight: normal;
                color: #333333;
            }
        }
        .recommend {
            .recommendBox {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                .recommendItem {
                    // height: 50px;
                    background: #f2f2f2;
                    border-radius: 0px 0px 0px 0px;
                    margin-bottom: 10px;
                    padding: 8px;
                    color: #333333;
                    .name {
                        font-size: 12px;
                        color: #666666;
                        margin-bottom: 10px;
                    }
                }
            }
        }
        .kfitem {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            .kfiteml {
                margin-right: 60px;
                // width: 33.33%;
                .name {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 12px;
                    color: #999999;
                    white-space: nowrap;
                    margin-bottom: 10px;
                    .icons {
                        margin-left: 10px;
                        color: #333333;
                    }
                }
                .nametip {
                    font-size: 20px;
                    color: #333333;
                    margin-bottom: 10px;
                    font-weight: bold;
                    white-space: nowrap;
                    span {
                        margin-left: 5px;
                        font-size: 12px;
                        font-weight: 400;
                    }
                }
            }
        }
    }
}
</style>
